<div class="row">
  <div class="col-md-12">
    <div class="admin-header">
      <div class="row">
        <div class="col-md-4 admin-title">
          <h2>

            <button class="btn btn-xs btn-warning btn-trasparent" ng-click="toggleProperties()"><i class="fa "
                                                                                                   ng-class="listClass"></i>
            </button>
            Graph Editor
            <a href="{{ database.getWiki() }}" class="btn btn-trasparent btn-help"
               data-placement="right"
               data-title="Help"
               data-trigger="hover"
               target="_blank"
               data-animation="am-flip-x"
               bs-tooltip>
              <i class="fa fa-question-circle fa-lg"></i>
            </a>
          </h2>
        </div>
        <div class="col-md-8 admin-actions">

          <div class="btn-toolbar pull-right">
            <div class="btn-group">
              <button href="javascript:void(0)"
                      data-title="Run Query"
                      data-trigger="hover"
                      data-placement="bottom"
                      bs-tooltip
                      ng-click="query()"
                      ng-disabled="!queryText"
                      class="btn btn-warning btn-sm">
                <i class="fa fa-play"> </i>


              </button>
            </div>
            <div class="btn-group">
              <button href="javascript:void(0)"
                      data-title="Save Configuration"
                      data-trigger="hover"
                      data-placement="bottom"
                      bs-tooltip
                      ng-disabled="!canSaveConfig"
                      ng-click="saveConfig()"
                      class="btn btn-primary btn-sm">
                <i class="fa fa-save"> </i>

              </button>
            </div>


            <!--<div class="btn-group">-->
            <!--<button href="javascript:void(0)"-->
            <!--data-title="Download SVG"-->
            <!--data-trigger="hover"-->
            <!--data-placement="bottom"-->
            <!--bs-tooltip-->
            <!--class="btn btn-sm btn-default"-->
            <!--ng-click="download()"><i-->
            <!--class="fa fa-download"> </i>-->
            <!--</button>-->
            <!--</div>-->
            <div class="btn-group">
              <button href="javascript:void(0)"
                      data-title="Add Vertex"
                      data-trigger="hover"
                      data-placement="bottom"
                      bs-tooltip
                      class="btn btn-sm btn-default"
                      ng-click="addNode()"><i
                class="fa fa-plus-circle"> </i>
              </button>
            </div>

            <div class="btn-group">
              <button href="javascript:void(0)"
                      data-title="Fit Graph"
                      data-trigger="hover"
                      data-placement="bottom"
                      bs-tooltip
                      class="btn  btn-sm btn-default"
                      ng-click="resetZoom()"><i
                class="fa fa-arrows-alt"> </i>
              </button>
            </div>
            <!--<div class="btn-group" ng-hide="fullscreen">-->
            <!--<button href="javascript:void(0)"-->
            <!--data-title="Full Screen"-->
            <!--data-trigger="hover"-->
            <!--data-placement="bottom"-->
            <!--bs-tooltip-->
            <!--class="btn  btn-sm btn-default"-->
            <!--ng-click="fullscreen = true"><i-->
            <!--class="fa fa-expand"> </i>-->

            <!--</button>-->
            <!--</div>-->
            <!--<div class="btn-group" ng-show="fullscreen">-->
            <!--<button href="javascript:void(0)"-->
            <!--data-title="Exit Full Screen"-->
            <!--data-trigger="hover"-->
            <!--data-placement="bottom"-->
            <!--bs-tooltip-->
            <!--class="btn  btn-sm btn-default"-->
            <!--ng-click="fullscreen = false"><i-->
            <!--class="fa fa-compress"> </i>-->

            <!--</button>-->
            <!--</div>-->
            <div class="btn-group">
              <button href="javascript:void(0)"
                      data-title="Clear Canvas"
                      data-trigger="hover"
                      data-placement="bottom"
                      bs-tooltip
                      class="btn  btn-sm btn-default"
                      ng-click="clear()"><i
                class="fa fa-trash-o"> </i>


              </button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn  btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                More <span class="caret"></span>
              </button>
              <ul class="dropdown-menu pull-right" role="menu">
                <li>
                  <a href="javascript:void(0)">
                    <i class="fa fa-search"> </i>
                    Hide Query
                    <input type="checkbox" bs-checkbox
                           ng-model="queryClass">
                  </a></li>
                <li><a href="javascript:void(0)"><i
                  class="fa fa-book"> </i>
                  Hide Legend
                  <input type="checkbox" bs-checkbox
                         ng-model="hideL" ng-click="hideLegend()">
                </a></li>

              </ul>
            </div>
          </div>
          <div class="pull-right graph-info">
            <h4>
                <span class="label label-primary"> Nodes
                 <span class="badge">{{nodesLen}}</span> </span>
              <span class="label label-primary"> Edges
                 <span class="badge">{{edgesLen}}</span> </span>
            </h4>
          </div>
        </div>
      </div>


      <div class="clearfix"></div>
      <div class="card queryGraph" ng-class="additionalClass">
        <div class="row">
          <div class="col-md-12">
            <div class="row animationQuery graph-query" ng-show="!queryClass">
              <div class="col-md-12 box" ng-class="{ 'open' :  !queryClass }">
                <form ng-submit="query()" class="form-inline">
                  <div ui-codemirror="editorOptions" ng-model="queryText">

                  </div>
                </form>

                <div class="query-info">
                  <div class="container-fluid">
                    <div class="row vertical-align">
                      <div class="col-md-10  info">
                        <div class="query-hint">
                          <a class="btn btn-trasparent" tabindex="1"
                             data-trigger="hover" data-placement="bottom-left"
                             data-animation="am-flip-x"
                             data-container="body"
                             data-template-url="views/hints/query-hint.html" bs-popover>
                            <i class="fa fa-keyboard-o fa-lg"> </i>
                          </a>
                        </div>
                      </div>
                      <div class="col-md-2 command">

                        <a
                          id="configQueryButton"
                          class="btn btn-trasparent btn-sm pull-right"
                          data-placement="bottom-right"
                          data-title="Graph configuration"
                          data-template-url="views/database/graphConfig.html"
                          bs-popover
                          data-toggle="dropdown"
                          href="javascript:void(0)">
                          <i class="fa fa-wrench"></i>
                          <b class="caret"></b>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="run-container">

                </div>
              </div>

            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="svg-container">
                  <div class="graph-container svg-content-responsive" ng-class="graphClass" ng-o-graph="graphOptions">

                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

